<template>
    <div class="group" :class="{
        'is-first-circle':firstCircle,
        'is-last-circle':lastCircle,
        'is-one-circle':HasOneSlot}">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { useSlots, onMounted,computed,reactive,shallowReactive,watch} from "vue"
// import {buttonProps} from "./botton"
let slots = useSlots()
let arr = computed(()=>{
  return  slots?.default?.()
}) 


// 获取默认插槽的成员
// let arr =slotsArr 

// console.log(arr,"arr")
// 一个成员的时候的样式
let HasOneSlot = computed(()=>{
    let a = arr.value?.filter((item,index)=> index ==0)[0]
    // console.log(a,"afefe")
    return a!?.props?.circle=="" && arr.value?.length==1
})

// 第一个圆圈的时候的样式
let firstCircle = computed(()=>{
   
    let a = arr.value?.filter((item,index)=> index ==0)[0]
    return a?.props?.circle=="" && arr.value?.length!>=2
})

// 第二个圆圈的样式
let lastCircle = computed(()=>{
    let b = arr.value?.filter((item,index)=> index+1 ==arr.value?.length)[0]
    return b?.props?.circle=="" && arr.value?.length!>=2
})  

onMounted(() => {

})


</script>

<style scoped lang="scss">
.group {
    display: flex;
    justify-content: start;

    :deep(button) {
        // border-width: 0.4px !important;
        border-width: 0.2px;
        border-radius: 0;
        margin-right: -1px;
        // margin-right: 0.5px;


        &:first-child {
            border-radius: 4px 0 0 4px;
            // border-right-width: 0;

        }

        &:last-child {
            border-radius: 0 4px 4px 0;
            // border-left-width: 0;
        }
    }

}

.is-one-circle {
    :deep(button) {
        &:first-child {
            border-radius: 50% !important;
            padding: 8px !important;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }
}

.is-first-circle {
    :deep(button) {
        &:first-child {
            border-radius: 50% ;
            padding: 8px ;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }
}

.is-last-circle {
    :deep(button) {
        &:last-child {
            border-radius: 50%;
            padding: 8px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}
</style>